#CooldownOverlay
{
	height: 100%;
	width: 100%;
	background-color: #000000DD;
}

#CooldownTimer
{
	color: white;
    font-size: 24px;
	text-shadow: 0px 0px 6px 6 #000000;
    horizontal-align: center;
    vertical-align: center;
}

#Cooldown
{
	width: 100%;
	height: 100%;
	visibility: collapse;
}

.in_cooldown #Cooldown
{
	visibility: visible;
}

#ManaCost
{
	color: #c0e8fb;
    font-size: 14px;
    font-weight: bold;
	text-shadow: 0px 0px 6px 8 #245191;
	margin-right: -2px;
	margin-bottom: -4px;

	vertical-align: bottom;
	horizontal-align: right;
}

.no_mana_cost #ManaCost
{
	visibility: collapse;
}

#ActiveAbility
{
	width: 100%;
	height: 100%;
	background-color: gradient( radial, 50% -20%, 0% 0%, 80% 80%, from( #FFFFFF ), to( #FFFFFF00 ) );
	border: 4px solid #FFFFFF40;
	opacity: 0;
}

.is_active #ActiveAbility
{
	opacity: 1;
}

#HotkeyContainer
{
	width: 100%;
	height: 100%;
	margin-left: 1px;	
	z-index: 5;
}

.FiveAbilities #HotkeyContainer,
.SixAbilities #HotkeyContainer
{
	margin-left: 0px;
}

#abilities #HotkeyContainer
{
	border: 0px solid white;
}

#Hotkey
{
	margin-left: -4px;
	z-index: 16;
	border-radius: 20%;

	vertical-align: top;
	horizontal-align: left;
	min-width: 14px;
	min-height: 14px;
	max-width: 70px;
	max-height: 15px;
	white-space: nowrap;

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #393939 ), to( #414849 ) );
	border: 1px solid #ffffff05;
	box-shadow: fill black 1px 1px 2px 2px;
}

#HotkeyText
{
	color: #bba995;
 	text-shadow: 1px 1px 0px 2 #000000;
    font-size: 12px;
    font-weight: normal;
	text-align: center;
	horizontal-align: center;
	margin: 0px 0px -2px 0px;
}

#HotkeyModifier
{
	margin-left: -4px;
	margin-top: 20px;
	z-index: 16;
	vertical-align: top;
	horizontal-align: left;
	min-width: 18px;
	flow-children: down;

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #393939 ), to( #414849 ) );
	border: 1px solid #ffffff05;
	box-shadow: fill black 1px 1px 2px 2px;

	visibility: collapse;
}

.hotkey_alt #HotkeyModifier
{
	visibility: visible;
}


#HotkeyCtrlModifier
{
	margin-left: 0px;
	margin-top: 0px;
	z-index: 15;
	vertical-align: top;
	horizontal-align: left;
	min-width: 31px;

	background-color: #212726;
	border-radius: 4px;
	border: 1px solid black;
	box-shadow: fill #000000dd 0px 0px 2px 2px;

	visibility: collapse;
}

.hotkey_ctrl #HotkeyCtrlModifier
{
	visibility: visible;
}

.QueryUnit .hotkey_ctrl #HotkeyCtrlModifier
{
	visibility: collapse;
}

.LowVisualQuality #HotkeyCtrlModifier
{
	border-radius: 0px;
}


.no_level:not(.show_level_up_tab) #HotKey,
.no_level:not(.show_level_up_tab) #HotKeyModifier
{
	visibility: collapse;
}

.is_passive:not(.show_level_up_tab) #HotKey,
.is_passive:not(.show_level_up_tab) #HotKeyModifier
{
	visibility: collapse;
}

.no_item #Hotkey,
#stash_row #Hotkey,
.no_hotkey #Hotkey,
.no_item #HotkeyModifier,
#stash_row #HotkeyModifier,
.no_hotkey #HotkeyModifier
{
	visibility: collapse;
}


#LevelUpTab
{
	width: 60%;
	height: 18px;
	horizontal-align:center;
	vertical-align: middle;
	margin-bottom: 4px;
	
	tooltip-position: top;
	tooltip-body-position: 50% 50%;

	z-index: 2;
	transition-property: opacity, brightness;
	transition-timing-function: ease-in-out;
	transition-duration: .12s;	
	background-color: gray;
	visibility: collapse;
}

#LevelUpButton
{
	width: 100%;
	height: 36px;

	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: white;
	transition-property: opacity, brightness, pre-transform-scale2d;
	transition-timing-function: ease-in-out;
	transition-duration: .12s;	
	
	margin-bottom: -4px;
}
#descLvup{
	vertical-align: middle;
	horizontal-align:center;
	color:black;
	font-size: 18px;
}

#LevelUpIcon
{
	horizontal-align: center;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transition-property: background-image;
	transition-duration: .12s;
}

#LevelUpTab:hover #LevelUpIcon
{
	
}

.show_level_up_tab #LevelUpTab
{
	opacity: 1;
}

